<template>
  <div>
  	<flexbox>
	    <flexbox-item>
	      <template>
	        <yd-search :result="result" fullpage v-model="value2" :item-click="itemClickHandler" :on-submit="submitHandler"></yd-search>
	      </template>
	    </flexbox-item>
	</flexbox>

	<flexbox>
	    <flexbox-item>
  		<div style="height: 700px; overflow-y: auto; position: relative;">
  	<yd-scrolltab>
        <yd-scrolltab-panel :label="item.name" 
        v-for="(item, index) in data" :key="index"
        >
            <yd-list theme="4"> 
		        <yd-list-item v-for="i, key in item.list" 
		        @click.native="productinfo(i.code)" :key="key"
		        >
		            <img slot="img" v-lazy="i.pic">
		            <span slot="title">{{i.name}}</span>
		            <yd-list-other slot="other">
		                <div>
		                    <span class="demo-list-price">{{i.msg1}}</span>
		                </div>
		            </yd-list-other>
		            <yd-list-other slot="other">
		                <div>
		                    <span class="red demo-list-price">{{i.msg2}}</span>
		                </div>
		            </yd-list-other>
		        </yd-list-item>
		    </yd-list>

        </yd-scrolltab-panel>
    </yd-scrolltab>
    	</div>
    	</flexbox-item>
	</flexbox>

  </div>

</template>

<script>

// import { Cell, Button, IndexList, IndexSection, MessageBox} from 'mint-ui'
import { mapGetters } from 'vuex';
import { cutQueryString, cutImage } from '../../util/util'
import wx from '../../util/weixin';
import QrcodeVue from 'qrcode.vue';

export default {
	name: 'goodsforcustormer',
	data () {
		return {
		  	msg: '产品列表',
		  	result: [],
		  	value2: '',
		}
	},

	computed : {
		...mapGetters([
			'goodslist', 
			'company_code', 
			'URL',
		]),

		//用类别编号做对象属性，存对象，
		data () {
			var obj = {
				'default' : {
					'name' : '其他',
					'code' : 'other',
					'list' : [],
				}
			};

			var arr = [];

			var result = [];

			for(var i = 0; i < this.goodslist.length; i++){
				var tmp = this.goodslist[i];
				var msg1 = '价格：¥ ';
				if(tmp.minguide_price == tmp.maxguide_price){
					msg1 += tmp.minguide_price;
				}else{
					msg1 += tmp.minguide_price + ' - ' + tmp.maxguide_price
				}
				tmp['msg1'] = msg1;

				if(tmp.top_pic == undefined){
					tmp['pic'] = this.URL.defaultImg;
				}else{
					try{
						var ttt = JSON.parse(tmp.top_pic);
		                tmp['pic'] = cutImage(ttt[0]);
					} catch (err) {
						tmp['pic'] = this.URL.defaultImg;
					}
				}


				if(tmp.type_code == undefined || tmp.type_code == null){
					obj.default.list.push(tmp);

				}else{
					//有类别的产品
					if(obj[tmp.type_code] == undefined){
						obj[tmp.type_code] = {
							'name' : tmp.type_name,
							'code' : tmp.type_code,
							'list' : [tmp],
						};
						arr.push(tmp.type_code);
					}else{
						obj[tmp.type_code].list.push(tmp);
					}
				}
			}

			if(this.goodslist.length > 0){
				arr.push('default');
			}

			for(var i = 0; i < arr.length; i++){
				var key = arr[i];
				result.push(obj[key]);
			}

			return result;
		},

		productnamelist () {
			var arr = [];
			for(var i = 0; i < this.goodslist.length; i++){
				var tmp = this.goodslist[i];
				arr.push(tmp.name);
			}
			console.log(arr);
			return arr;
		},
		
	},

	methods : {
		productinfo (productcode) {
			console.log(productcode);
			this.$router.push({ 
				name: 'productinfo', 
				params: { code: productcode },
				query : { 
					'company_code' : this.company_code,
					'u' : this.$route.query.u,
				},
			});
		},

		itemClickHandler(item) {
			console.log('itemClickHandler');
			console.log(item);
			this.$router.push({ 
				name: 'productlist', 
				query : {
					'company_code' : this.company_code,
					'name' : item,
					'u' : this.$route.query.u,
				},
			});
      	},

		submitHandler(value) {
			console.log('submitHandler');
			this.$router.push({ 
				name: 'productlist', 
				query : {
					'company_code' : this.company_code,
					'name' : value,
					'u' : this.$route.query.u,
				},
			});
		},

		getResult(val) {
			console.log('getResult');
			console.log(val);
			if (!val) return [];
			return this.productnamelist.filter(value => (new RegExp(val, 'i').test(value)));
		},
	},

	mounted () {
		this.$store.dispatch('getGoodsList', {
			'openid' : this.$route.query.u,
		});
	},

	watch: {
		value2(val) {
			this.result = this.getResult(val);
		}
  	},
}
</script>

<style scoped>

</style>
